import React from 'react'
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles({
    loginWrapper:{
        display:"flex",
        flexDirection:"column",
        justifyContent:"center",
        alignItems:'center',
    },
    login:{
        minWidth:450,
        marginTop:'30vh'
    },
    cardContentWrapper:{
        display: 'flex',
        flexDirection: "column",
        alignItems: 'center'
    }
})
export default function Login(){
    const classes = useStyles();

    return (
        <div className={classes.loginWrapper}>
            <Card className={classes.login}>
                <CardContent className={classes.cardContentWrapper}>
                    <span style={{
                        padding:'1em',
                        
                    }}>react-admin-template</span>
                    <TextField
                        fullWidth
                        style={{
                            paddingBottom:'1em'
                        }}
                        label="账号" variant="outlined" />
                    <TextField
                        fullWidth
                        label="密码"
                        style={{
                            paddingBottom:'1em'
                        }}
                        variant="outlined" />
                    <Button variant="contained"
                            style={{
                                width:'100%'
                            }}
                            color="primary" disableElevation>LOGIN</Button>
                </CardContent>
            </Card>
        </div>
    )
}
